<template>

  <div >
    <h1 align="center"><strong>{{ msg }}</strong></h1>
    <div >


      <el-row>
        <el-col :span="10" :offset="6">

          <!--     表单渲染数据     -->
          <el-form ref="phone" :rules="rules" :model="phone" label-width="80px">

            <el-form-item label="手机号" prop="phone">
              <el-input v-model="phone.phoneNum"></el-input>
              <el-button type="success" @click="sendPhone()">发送验证码</el-button>
            </el-form-item>

            <el-form-item label="验证码" prop="codes">
              <el-input v-model="phone.codes"></el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="addSubmit('phone')">提交验证</el-button>
              <el-button @click="resetForm('phone')" type="warning">重置</el-button>
              <router-link :to="{name:'ShowPhone'}" ><el-button type="danger">取消</el-button></router-link>
            </el-form-item>

          </el-form>

        </el-col>
      </el-row>
    </div>
  </div >

</template>

<script>

//import axios from 'axios'
import instance from '../../util/request'

export default {
  name: "SendPhone",
  data(){
    return {
      msg: "发送手机验证码",
      phone: {
        phoneNum: '',
        codes: '',
      },
    }
  },
  rules: {
    phone: [
      {required: true, message: '请输入手机号', trigger: 'blur'},
      {min: 11, max: 11, message: '长度在 11 个字符', trigger: 'blur'}
    ],
    codes: [
      {required: true, message: '请输入验证码', trigger: 'blur'},
      {min: 6, max: 6, message: '长度在 6 个字符', trigger: 'blur'}
    ]
  },
  methods:{
    addSubmit(formName) {   //提交表单触发的方法

      /**1.表单验证*/
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //alert('submit!');

          /**2.提交表单验证手机验证码*/
          instance.post("/user/phoneCheck",this.phone).then((res)=>{

            /**3.提示框*/
            this.$message({
              message: res.data.message, //提示框提示的信息
              type: 'success',  //提示框颜色样式
            });

          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    sendPhone(){
      /**1.发动验证码*/
      instance.get("/user/getPhoneCode?phone="+this.phone.phoneNum).then((res)=>{

        /**2.提示框*/
        this.$message({
          message: res.data.message, //提示框提示的信息
          type: 'success',  //提示框颜色样式
        });
      });
    },
    resetForm(formName) {   //表单验证 重置表单
      this.$refs[formName].resetFields();
    }
  }
}

</script>


